// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Rectangle {
    id: main
    width: 576;height: 400;
    property variant currentAlbumIndex: 0
    property variant currentAlbumTitle: "Kid A"
    property variant currentArtist: "Radiohead"
    property variant currentTrack: "Everything in it's right place"
    property variant currentAlbumArt: "Assets/music/album.png"
    signal updateMusicWidget()
    property string lang: "1"

    MouseArea {
        id: mouseRegion
        anchors.fill: parent;
        property variant clickedPosition: "1,1"
        x: 0
        y: 0
        width: 576
        height: 500
        anchors.topMargin: 0

        onPressed: {
            clickedPosition  = Qt.point(mouse.x,mouse.y)
        }
        onPositionChanged: {
            var mousePosX = (mouse.x <0) ? 0 : mouse.x
           var mousePosY = (mouse.y <0) ? 0 : mouse.y
            var relative = Qt.point(mousePosX-clickedPosition.x, mousePosY-clickedPosition.y)
            main.pos = Qt.point(main.pos.x+relative.x,
                                    main.pos.y+relative.y)

        }
    }

    Rectangle{
        id:searchBar
        x:0;y:0
        width: parent.width;height:50
        color: "gray"

        Image {
            id: searchImage
            x: 528
            y: 2
            width: 48
            height: 48
            source: "Assets/music/search.png"

            MouseArea {
                id: mouseRegionSearchButton
                x: -5
                y: 0
                width: 53
                height: 48

                onPressed: {
                    //conduct search
                }
            }
        }

        TextInput {
            id: searchInput
            x: 0
            y:0
            width: parent.width -48
            height: parent.height
            color: "white"
            text: if(lang=="1") qsTr("Search Here"); else "Buscar Aqui";
            horizontalAlignment: TextInput.AlignLeft
            font.pixelSize: 36

            onFocusChanged: {
                text = qsTr("")
            }
        }
    }

    Rectangle{
        id:albumArt
        x: 0
        y: 50
        width:parent.width
        height:150
        color:"blue"

        Rectangle {
            id: background
            x: 0
            y: 0

            width: parent.width; height: parent.height
            Behavior on color { ColorAnimation { duration: 200 } }
            color: "black"

            Flickable {
                id: flickable
                x: 0
                y: 0
                width:parent.width
                clip: true
                boundsBehavior: Flickable.StopAtBounds

                anchors.rightMargin: 0
                anchors.bottomMargin: 0
                anchors.leftMargin: 0
                anchors.topMargin: 0
                anchors.fill: parent
                contentWidth: flickable.width; contentHeight: flickable.height


                onMovementStarted: background.color = "#705050"
                onMovementEnded: background.color = "black"

                Row {
                    x: 50
                    width:parent.width
                    spacing: flickable.contentWidth / 1

                    ListView {
                        id: albumList
                        width: 500; height: 300
                        contentWidth: 400
                        snapMode: ListView.SnapToItem
                        orientation: ListView.Horizontal
                        boundsBehavior: Flickable.StopAtBounds
                        flickableDirection: Flickable.HorizontalFlick
                        model: xmlArtModel
                        delegate:
                            Image {
                                source: art; width:128;height:128;
                                MouseArea{
                                    id: albumClick
                                    x:0;y:0;height:parent.height;width:parent.width;
                                    onClicked: {albumList.currentIndex = index;currentAlbumIndex=index;
                                        xmlTrackModel.reload();console.log("albumclicked" +albumList.currentIndex);}
                                }
                            }
                    }
                }
            }
        }
    }
    Rectangle{
        id: title
        x: 0
        y: 250
        color:"black"
        width:parent.width
        height:50

        Text {
            id: titleText
            width: parent.width
            height:parent.height
            x: 0
            y: 4
            text: qsTr(xmlArtModel.get(currentAlbumIndex).artist + " : " + xmlArtModel.get(currentAlbumIndex).album)
            horizontalAlignment: Text.AlignHCenter
            color: "gray"
            font.underline: true
            font.pixelSize: 36
        }
    }
    Rectangle{
        id: playBar
        x: 0
        y: 200
        width: parent.width
        height: 50
        color: "#000000"
        Image{
            id: playButton
            x: 0
            y: 10
            height:40;width:40
            smooth: true
            source: "Assets/music/play.png"
            MouseArea{
                x:0;y:0;width:parent.width;height:parent.height;
                onClicked:{playButton.visible=false;pauseButton.visible=true;}
            }
        }
        Image{
            id: pauseButton
            x: 0
            y: 10
            height:40;width:40
            smooth: true
            visible:false
            source: "Assets/music/pause.png"
            MouseArea{
                x:0;y:0;width:parent.width;height:parent.height;
                onClicked:{playButton.visible=true;pauseButton.visible=false;}
            }
        }
        Rectangle {
          id: slider;
          width: 150; height: 10;
          anchors.centerIn: parent
          property int value: Math.round(handle.x*100/(slider.width-handle.width))
          x: 426
          y: 25
          color: "blue"
          anchors.verticalCenterOffset: 5
          anchors.horizontalCenterOffset: 213
          Rectangle {
            id: handle; width: 25; height: 10
            color: "gray"
            MouseArea {
              anchors.fill: parent
              drag.target: parent; drag.axis: "XAxis"
              drag.minimumX: 0; drag.maximumX: slider.width - handle.width
            }
          }
        }
        Rectangle {
          id: sliderTime;
          width: parent.width; height: 10;
          anchors.centerIn: parent
          property int value: Math.round(handleTime.x*100/(sliderTime.width-handleTime.width))
          x: 0
          y: 0
          color: "gray"
          anchors.verticalCenterOffset: -20
          anchors.horizontalCenterOffset: 0
          Rectangle {
            id: handleTime; width: 40; height: 10
            color: "white"
            MouseArea {
              anchors.fill: parent
              drag.target: parent; drag.axis: "XAxis"
              drag.minimumX: 0; drag.maximumX: sliderTime.width - handleTime.width
            }
          }
        }
        Image {
            id: speakerImage
            x: 401
            y: 18
            width: 25
            height: 25
            source: "Assets/music/speakeron.png"
        }

    }
    Rectangle {
        id: container
        x: 0
        y: 300
        width: parent.width; height: 400
        color: "#000000"

        // The delegate for each fruit in the model:
        Component {
            id: listDelegate
            Item {
                id: delegateItem
                width: listView.width; height: 25
                clip: true

                MouseArea{
                    x:0;y:0;width:parent.width;height:parent.height
                    onClicked: {console.log("Song Clicked");Language.currentTrack=songText.text;updateMusicWidget();}
                }

                Row {
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 10
                    Column {
                        anchors.verticalCenter: parent.verticalCenter

                        Text {
                            id: songText
                            text: song
                            font.pixelSize: 15
                            color: "white"
                        }
                    }
                }

                Row {
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    spacing: 10

                    Text {
                        id: timeText
                        anchors.verticalCenter: parent.verticalCenter
                        text: time
                        font.pixelSize: 15
                        color: "white"
                        font.bold: true
                    }
                }
            }
        }

        // The view:
        ListView {
            id: listView
            x: 20
            y: 20
            anchors.rightMargin: 20
            anchors.bottomMargin: 20
            anchors.leftMargin: 20
            anchors.topMargin: 20
            anchors.fill: parent; anchors.margins: 20
            model: xmlTrackModel
            delegate: listDelegate

        }
    }
    XmlListModel {
        id: xmlArtModel
        source: "Assets/music/data.xml"
        query: "/system/note"
        XmlRole { name: "album"; query: "album/string()" }
        XmlRole { name: "artist"; query: "artist/string()" }
        XmlRole { name: "art"; query: "art/string()" }

    }

    XmlListModel{
        id: xmlTrackModel
        source: "Assets/music/data.xml"
        query: "/system/note[@name='"+ currentAlbumIndex + "']/tracks"
        XmlRole {name: "song"; query: "song/string()"}
        XmlRole {name: "time"; query: "time/string()"}
    }



    //  query: "/system/category[@name='"+ appVar.currentProdCategory + "']/product"
}
//Westins
